<template>
  <el-card shadow="never" :body-style="{ padding: '0px' }">
    <template #header>
      <div class="card_header">
        <span>快捷导航</span>
        <el-icon style="font-size: 20px" class="card_header_icon">
          <circle-plus />
        </el-icon>
      </div>
    </template>

    <el-row>
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" v-for="item in list" :key="item">
        <el-card shadow="hover" style="margin-bottom: 0px; border-radius: 0px; cursor: pointer">
          <div class="card_body">
            <el-icon :color="item.color" style="font-size: 20px">
              <component :is="item.icon" />
            </el-icon>

            <span class="card_body_title">{{ item.title }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const list = [
      {
        title: '首页',
        icon: 'home-filled',
        color: '#1fdaca'
      },
      {
        title: '仪表盘',
        icon: 'Menu',
        color: '#bf0c2c'
      },
      {
        title: '组件',
        icon: 'Box',
        color: '#e18525'
      },
      {
        title: '系统管理',
        icon: 'Setting',
        color: '#3fb27f'
      },
      {
        title: '权限管理',
        icon: 'Key',
        color: '#4daf1bc9'
      },
      {
        title: '图表',
        icon: 'data-analysis',
        color: '#00d8ff'
      }
    ]
    return {
      list
    }
  }
})
</script>

<style lang="scss" scoped>
.card_header {
  display: flex;
  justify-content: space-between;

  .card_header_icon {
    cursor: pointer;

    &:hover {
      color: var(--el-color-primary);
    }
  }
}

.card_body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .card_body_title {
    font-size: 14px;
    margin-top: 8px;
  }
}
</style>
